<template>
  <!-- 增删改查
     完成先后：
        查：
           1：完成布局
           2：获取数据
              a:定义接口api
              b:导入接口api
              c:进入页面调用接口获取数据并存储
           3：渲染数据
              a:渲染数据

          接口调用与分页建立关联
            1:处理分页组件的布局
            2：配制：默认页码，默认页容量，总数,页码改变的方法
                            current-page：默认页码
                            page-size:默认的页容量  
                            @current-change="页码改变量触发" 
                            total 总数
            3：页码改变时，在方法中将参数页码一起改变，同时调用接口获取数据
            4：在获取数据后：修改total总数、、

  



        增
           1：布局
           2：表单验证
               el-form
                   model:整个表单的值
                   rules:规则
                      rules：{
                          prop的值：[
                            {required:true,message:错误信息,trigger:'blur/change'},
                            {min:最小长度,max:最大长度,message:错误信息,trigger:'blur/change'}
                            {pattern:正则,message:错误信息,trigger:'blur/change'}
                          ]

                      }
                el-form-item
                   prop="值的字段名"

            自行触发表单验证（调用el-form组件内的一个方法）
              1：el-form   ref="form"
              2:this.$refs.form.validateField(['prop的值'],(errorMessage)=>{
                errorMessage:为空代表验证通过
                             有值代表验证不通过
              })
           3:接口调用
              a:定义接口api
              b:在表单验证通过后调用api(导入与调用)
              c:调用成功
                 提示
                 清空表单数据
                 关闭弹框
                 刷新列表数据
        删与改
       
         改：
           1：点击修改按钮：打开弹框
           2：弹框内：标题修改了
           3：弹框内：数据回显了
           4：点击确定：
                 调用修改api(定义修改api,导入修改api)
                 调用时要分场景调用了（新增/修改）
           5：调用成功
               提示
               清空表单数据
               关闭弹框
               刷新列表数据  
               
         删
           1：点击删除弹出确定框
           2：用户点击了确定才执行删除
              a:定义删除api
              b:导入删除api
              c:调用删除api
           3:删除成功
              提示
              刷新列表数据？
                  判断页码>1 && 当前页只有一条数据
                      页码--
                      刷新列表数据


          预览
            1：点击预览打开弹框
            2：标题要修改
            3：内容不再是富文本编辑器了，就是普通文本展示
            4：没有取消与确定按钮
               -->

  <div class="article">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>面经后台</el-breadcrumb-item>
      <el-breadcrumb-item>面经管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="card" shadow="never">
      <template #header>
        <div class="header">
          <div>共{{ total }}条记录</div>
          <el-button @click="addEvent" type="primary" round
            >+ 添加面经</el-button
          >
        </div>
        <el-table :data="list" border>
          <el-table-column
            prop="stem"
            label="标题"
            width="400px"
          ></el-table-column>
          <el-table-column prop="creator" label="作者"></el-table-column>
          <el-table-column
            prop="likeCount"
            label="点赞"
            width="90px"
          ></el-table-column>
          <el-table-column
            prop="views"
            label="浏览数"
            width="90px"
          ></el-table-column>
          <el-table-column prop="createdAt" label="更新时间"></el-table-column>
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <div class="option">
                <i class="el-icon-view" @click="look(row)"></i>
                <i class="el-icon-edit-outline" @click="editClick(row)"></i>
                <el-popconfirm
                  title="您确定删除该条数据吗？"
                  @confirm="delClick(row.id)"
                >
                  <template #reference>
                    <i class="el-icon-delete"></i>
                  </template>
                </el-popconfirm>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <!-- 
            background:带背景色  
            layout:需要什么配制什么
            total:总条数   
            current-page：默认页码
            page-size:默认的页容量  
            @current-change="页码改变量触发"     
           -->
          <el-pagination
            :current-page="query.current"
            :page-size="query.pageSize"
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="currentChange"
          >
          </el-pagination>
        </div>
      </template>
    </el-card>
    <!-- 添加面经弹框 -->
    <!-- 
      const obj={add:'添加面经',edit:'修改面经'}
      let mode='add'
      obj.add
      obj.edit
      obj[mode]
      {add:'添加面经',edit:'修改面经'}[mode]
     -->
    <el-drawer
      :title="{ add: '添加面经', edit: '修改面经', look: '预览面经' }[mode]"
      :visible.sync="isShow"
      :size="600"
      @close="cancelClick"
    >
      <div style="padding:15px;">
        <!-- 预览时展示 -->
        <div v-if="mode === 'look'">
          <h3>{{ form.stem }}</h3>
          <div v-html="form.content"></div>
        </div>
        <!-- 新增与编辑时展示 -->
        <el-form
          v-else
          label-width="80px"
          :model="form"
          :rules="rules"
          ref="form"
        >
          <el-form-item label="标题" prop="stem">
            <el-input v-model="form.stem" placeholder="输入面经标题"></el-input>
          </el-form-item>
          <el-form-item label="内容" prop="content">
            <!-- 
              quillEditor
              v-model
              @change:值改变了触发
              @blur:失去焦点时触发            
             -->
            <quillEditor
              v-model="form.content"
              @change="changEvent"
            ></quillEditor>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit">确定</el-button>
            <el-button @click="cancelClick">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import {
  adminInterviewQuery,
  adminInterviewCreate,
  adminInterviewUpdate,
  adminInterviewRemove
} from '@/api/article'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
export default {
  components: {
    quillEditor
  },
  data () {
    return {
      mode: 'add', // 场景标识  add:新增  edit:编辑  look:预览
      id: '',
      isShow: false,
      list: [],
      query: {
        current: 1, // 页码
        pageSize: 3 // 页容量  每页多少条
      },
      form: {
        stem: '',
        content: ''
      },
      rules: {
        stem: [{ required: true, message: '必填', trigger: 'change' }],
        content: [{ required: true, message: '必填', trigger: 'change' }]
      },
      total: 100
    }
  },
  created () {
    this.getData()
  },
  methods: {
    // 获取列表数据
    async getData () {
      const res = await adminInterviewQuery(this.query)
      // 存储数据
      this.list = res.data.rows
      // 修改total
      this.total = res.data.total
      console.log('列表数据', res)
    },
    // 页码改变
    currentChange (page) {
      // console.log('页码改变了', page)
      // console.log('current', this.query.current)
      this.query.current = page
      // 调用接口获取数据
      this.getData()
    },
    // 添加面经
    addEvent () {
      this.isShow = true
      this.mode = 'add'
    },
    // 富文本表单验证
    changEvent () {
      this.$refs.form.validateField(['content'], errorMessage => {
        if (errorMessage) {
          console.log('验证失败')
        } else {
          console.log('验证成功')
        }
      })
    },
    // 新增确定点击
    submit () {
      this.$refs.form.validate(async result => {
        if (result) {
          if (this.mode === 'add') {
            await adminInterviewCreate(this.form)
            // 提示
            this.$message.success('添加成功')
          } else if (this.mode === 'edit') {
            await adminInterviewUpdate({
              id: this.id,
              ...this.form
            })
            this.$message.success('修改成功')
          }
          // 关闭弹框  清空表单数据与验证
          this.cancelClick()
          // 刷新列表数据
          this.getData()
        }
      })
    },
    // 取消点击
    cancelClick () {
      // 关闭弹框
      this.isShow = false
      // 清空表单数据  将form表单的值重置成初次渲染时的值，移除了校验结果
      // this.$refs.form.resetFields()
      this.form = {
        stem: '',
        content: ''
      }
      // 1:清空表单的值  2：移除了校验结果  3：触发了change事件 4：又出现了错误
      // 同时清空表单验证错误
      setTimeout(() => {
        this.$refs.form.clearValidate()
      }, 0)
    },
    // 编辑点击
    editClick (row) {
      this.isShow = true
      this.mode = 'edit'
      // 数据回显
      this.form.stem = row.stem
      this.form.content = row.content
      // 存储id
      this.id = row.id
      console.log(row)
    },
    // 删除点击
    async delClick (id) {
      await adminInterviewRemove(id)
      // 提示
      this.$message.success('删除成功')
      // 刷新列表数据
      // 如果删除的当前页只有一条数据，如果当前页删除完成就回到上一页
      if (this.query.current > 1 && this.list.length === 1) {
        this.query.current--
      }
      // this.query.current = 1
      this.getData()
    },
    // 预览点击
    look (row) {
      this.isShow = true
      this.mode = 'look'
      // 数据回显
      this.form.stem = row.stem
      this.form.content = row.content
    }
  }
}
</script>
<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card {
  margin-top: 20px;
}
.option {
  i {
    margin: 0 15px;
    cursor: pointer;
    font-size: 20px;
  }
}
.page {
  padding: 20px 0 0;
  text-align: center;
}
::v-deep .ql-editor {
  min-height: 200px;
}
</style>
